<template>
  <div class="detail">
    <div class="detail_header">
      <van-nav-bar title="标题" @click-left="onClickLeft">
        <template #left> <van-icon name="arrow-left" color="grey" /> </template>
        <template #right>
          <van-icon color="grey" name="ellipsis" size="18" />
        </template>
        <template #title>
          <ul>
            <li>商品</li>
            <li>评价</li>
            <li>详情</li>
            <li>推荐</li>
          </ul>
        </template>
      </van-nav-bar>
    </div>
    <div class="detail_content">
      <div id="my_swiper">
        <van-swipe
          class="my-swipe"
          :height="300"
          :autoplay="3000"
          indicator-color="red"
          @change="myChange"
        >
          <van-swipe-item v-for="item in banners" @click="showBigImage">
            <img :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <h3>
        <van-tag color="#ffe1e1" text-color="#ad0000">{{ cate }}</van-tag>
        <van-text-ellipsis :content="title" rows="2" />
      </h3>
      <van-swipe class="my-swipe"  indicator-color="red">
        <van-swipe-item v-for="item in recLen">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item1 in recommendList.slice(6*(item-1),item*6)"
              :key="item1"
            >
              <template #default>
                    <van-image :src="item1.img1"/>
                    <van-text-ellipsis :content="item1.proname" />
                    <p>{{item1.originprice}}</p>
              </template>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
      </van-swipe>

      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          v-if="issale == 1"
        />
        <van-action-bar-button type="danger" text="商品下架" v-else />
      </van-action-bar>
    </div>
  </div>
</template>
<script setup>
import { getDetail } from "@/api/home.js";
import { useRoute } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { getRecommendList } from "@/api/home.js";
const route = useRoute();
const detailList = ref([]);
const banners = ref([]);
const title = ref("");
const cate = ref("");
const issale = ref(1);
const recommendList = ref([]);
const recLen = computed(() => Math.ceil(recommendList.value.length / 6));
const onClickLeft = () => history.back();
getDetail(route.params.proid).then(({ data: res }) => {
  console.log(res.data);
  detailList.value = res.data;
  banners.value = detailList.value.banners[0].split(",");
  title.value = res.data.proname;
  cate.value = res.data.category;
  issale.value = res.data.issale;
});
const index = ref(0);
const showBigImage = () => {
  showImagePreview({
    images: banners.value,
    startPosition: index.value,
  });
};
const myChange = (i) => {
  // console.log(index);
  index.value = i;
};

onMounted(() => {
  getRecommendList().then(({ data: res }) => {
    // console.log(res.data);
    recommendList.value = res.data;
  });
});
</script>
<style scoped lang='less'>
.detail {
  ul {
    display: flex;
    li {
      padding: 0px 6px;
    }
  }
}
</style>